<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="headerCon">
      <view class="tabCon">
        <view class="flex-box">
          <view @tap="filtrateActiveClick"
                data-active="goods"
                :class="'flex-item-1 tabText font_c_45 font_s_28 ' + (filtrateActive=='goods'?'active':'')">
            <text class="iconfont iconweizhi tabTextIcon"></text>
            <text>商品</text>
          </view>
          <view @tap="filtrateActiveClick"
                data-active="recommended"
                :class="'flex-item-1 tabText font_c_45 font_s_28 ' + (filtrateActive=='recommended'?'active':'')">
            <text class="iconfont iconweizhi tabTextIcon"></text>
            <text>推荐</text>
          </view>
          <view @tap="filtrateActiveClick"
                data-active="details"
                :class="'flex-item-1 tabText font_c_45 font_s_28 ' + (filtrateActive=='details'?'active':'')">
            <text class="iconfont iconweizhi tabTextIcon"></text>
            <text>详情</text>
          </view>
        </view>
      </view>
    </view>
    <scroll-view @scroll="scroll"
                 scroll-with-animation="true"
                 :scroll-into-view="anchor"
                 class="goodsDetailS"
                 scroll-y
                 @scrolltolower="getSearchProductsMore">
      <!-- 轮播图 -->
      <swiper id="goods"
              class="banner"
              indicator-color="grba(0,0,0,.5)"
              indicator-dots="true"
              indicator-active-color="#000"
              autoplay="true">
        <block>
          <swiper-item v-for="(item, index) in 3"
                       :key="index">
            <image mode="scaleToFill"
                   src="./../../static/image/296866_00.jpg"></image>
          </swiper-item>
        </block>
      </swiper>
      <view class="colourCon flex-box">
        <view class="colour active">
          <image src="./../../static/image/296866_00.jpg"></image>
        </view>
        <view class="colour">
          <image src="./../../static/image/296866_00.jpg"></image>
        </view>
      </view>
      <view class="price">
        <text class="font_s_20 font_c_fff">折后价</text>￥94</view>
      <view class="priceTips font_s_24 font_c_91">唯品价￥168<text class="del">￥339</text>2.8折</view>
      <view class="goodsName font_s_32 flex-box">
        <text class="flex-item-1">2019夏新品-捧花篮的小姑娘捧花篮的小姑娘捧花篮的小姑娘</text>
        <text class="collect iconfont iconshoucang"></text>
      </view>
      <view class="goodsTips font_s_20 font_c_91">夏季新品淑女风连衣裙</view>
      <view class="line"></view>
      <view class="specification">
        <view class="skuColor">
          <view class="font_s_28 skuTitle">颜色</view>
          <view class="l_container">
            <view class="l_row">
              <view class="l_col-2">
                <view class="font_s_20 skuItem active">红色</view>
              </view>
              <view class="l_col-2">
                <view class="font_s_20 skuItem">黄色</view>
              </view>
              <view class="l_col-2">
                <view class="font_s_20 skuItem">蓝色</view>
              </view>
            </view>
          </view>
        </view>
        <view class="skuSize">
          <view class="font_s_28 skuTitle">规格</view>
          <view class="l_container">
            <view class="l_row">
              <view class="l_col-2">
                <view class="font_s_20 skuItem active">XXL</view>
              </view>
              <view class="l_col-2">
                <view class="font_s_20 skuItem">XL</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="recommend"
            id="recommended">
        <view class="recommendTitle font_s_28">相似推荐</view>
        <view class="l_container p12">
          <view class="l_row">
            <view class="l_col-3"
                  v-for="(item, index) in 2"
                  :key="index">
              <view class="goodsCon">
                <view class="goodsConImageCon">
                  <image class="tagIcon rightTop"
                         mode="widthFix"
                         src="/static/static/image/new.png"></image>
                  <image mode="widthFix"
                         src="./../../static/image/296866_00.jpg"></image>
                  <!-- <image wx:if="{{item.stock == 0}}" class="sale_out" mode="widthFix" src="./../../../static/image/sale_out.png"></image> -->
                </view>
                <view class="integral flex-box font_s_28">
                  <view class="flex-item-1 font_w_900">
                    <text class="integralText money font_c_pink">￥299</text>
                    <text class="integralText money  del font_c_91 font_s_22">￥398</text>
                  </view>
                </view>
                <view class="goodsTitle font_s_28 font_c_main van-ellipsis">
                  <text>小孩纸</text>
                </view>
                <view class="subheading font_s_22 font_c_91">漂亮的小孩纸，哈哈哈</view>
                <view class="tagCon flex-box">
                  <view class="tag font_c_pink font_s_22">可爱</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="detail"
            id="details">
        <view class="detailTitle font_s_28">商品详情</view>
        <image src="/static/static/image/1.jpeg"
               mode="widthFix"></image>
      </view>
    </scroll-view>
    <view class="footerBar">
      <view class="l_container">
        <view class="l_row">
          <view class="l_col-2">
            <view class="shopCart">
              <text class="num">3</text>
              <text class="iconfont iconcart font_s_30"></text>
            </view>
          </view>
          <view class="l_col-4">
            <view class="footerButton flex-box">
              <view class="font_s_28 addCart flex-item-1">加入购物车</view>
              <view class="font_s_28 pay flex-item-1">立即购买</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      filtrateActive: 'goods',
      anchor: 'goods'
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    //事件处理函数
    getSearchProductsMore() {
      console.log('触底加载')
    },

    //滚动事件处理
    scroll(e) {
      let that = this
      const query = uni.createSelectorQuery()
      query.select('#goods').boundingClientRect()
      query.select('#recommended').boundingClientRect()
      query.select('#details').boundingClientRect()
      query.exec(function(res) {
        for (let i = 0; i < res.length; i++) {
          let item = res[i]

          if (item.top < 200) {
            that.filtrateActive = item.id
          }
        }
      })
    },

    //tab点击事件
    filtrateActiveClick: function(e) {
      let active = e.currentTarget.dataset.active
      console.log('用户点击的数据', active)
      this.filtrateActive = active
      this.anchor = active
    }
  }
}
</script>
<style>
@import './goodsDetail.css';
</style>